<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top: 20px">
      <div style="margin-top: 10px">
        <el-form
          :model="listQuery"
          ref="productForm"
          label-width="100px"
          :inline="true"
          style="margin-left:-40px"
        >
          <el-form-item label="部门">
            <el-select clearable v-model="listQuery.departmentId" placeholder="请选择所属部门"  style="width: 200px">
          <el-option v-for="item in departmentOptions" :key="item.id" :label="item.name"  :value="item.id">
          <span style="float: left">{{ item.name }}</span>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.total }}</span>
          </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input
              v-model="listQuery.username"
              style="width: 200px"
              placeholder="请输入用户名查询"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input
              v-model="listQuery.email"
              style="width: 200px"
              placeholder="请输入邮箱查询"
            ></el-input>
          </el-form-item>
          <el-form-item label="性别">
            <el-radio-group v-model="listQuery.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
              <el-radio :label="2">全部</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item label="昵称">
            <el-input
              v-model="listQuery.nickname"
              style="width: 200px"
              placeholder="请输入昵称查询"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <!-- 按钮 -->
      <div class="button_item" style="margin-left: 50px">
        <el-button @click="handleReset">重置</el-button>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button type="success" @click="handleAdd">添加</el-button>
        <el-button>导出</el-button>
      </div>
      <!-- 表格 -->
      <el-table border :data="userList" ref="multipleTable" style="width:1500px;margin:20px 20px">
        <el-table-column label="#" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.id }}
          </template>
        </el-table-column>
        <el-table-column label="用户名" align="center" width="100">
          <template slot-scope="scope">
            {{ scope.row.username }}
          </template>
        </el-table-column>
        <el-table-column label="性别" align="center" width="100">
          <template slot-scope="scope">
            <!-- {{ scope.row.sex|sex }} -->
            <el-tag  v-if="scope.row.sex === 0" type="danger">{{scope.row.sex|sex}} </el-tag>
            <el-tag  v-else type="success">{{scope.row.sex|sex}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属部门" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.departmentName }}
          </template>
        </el-table-column>
        <el-table-column label="生日" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.birth }}
          </template>
        </el-table-column>
        <el-table-column label="邮箱" align="center" width="200">
          <template slot-scope="scope">
            {{ scope.row.email }}
          </template>
        </el-table-column>
        <el-table-column label="电话" align="center" width="150">
          <template slot-scope="scope">
            {{ scope.row.phoneNumber }}
          </template>
        </el-table-column>
        <el-table-column label="是否禁用" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="0"
              :inactive-value="1"
              @change="handleShowchange(scope.$index, scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" >
          <template slot-scope="scope">
            <el-button size="mini" type="primary" icon="el-icon-edit-outline" @click="handleEdit(scope.row)"></el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.id)" icon="el-icon-delete"></el-button>
            <el-button size="mini" type="warning" icon="el-icon-s-tools" @click="handleAssign(scope.$index,scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
                      <!-- 分页区域 -->
          <div class="pagination-container" style="margin-right:60px">
              <el-pagination
                      layout="total,sizes,prev, pager, next,jumper"
                      :total="total"
                      :page-size="listQuery.pageSize"
                      :current-page="listQuery.pageNum"
                      :page-sizes="[6,10,15]"
                      @current-change="handlePageChange"
                      @size-change="handleSizeChange"
              >
              </el-pagination>
          </div>
          <!-- 编辑和添加-->
          <el-dialog
          :title="isEdit?'编辑用户':'添加用户'"
          :visible="isShow"
          width="50%"
          center
          :before-close="handleClose">
          <el-form :model="user"  class="form" style="margin-left:100px"  :inline="true">
              <el-form-item label="用户名">
                <el-input :disabled="isEdit" type="text" v-model="user.username" style="width:300px" ></el-input>
              </el-form-item>
                <el-form-item label="部门">
            <el-select clearable v-model="user.departmentId" placeholder="请选择所属部门"  style="width: 200px">
                  <el-option v-for="item in departmentOptions" :key="item.id" :label="item.name" :value="item.id">
                    {{item.name}}
                  </el-option>
            </el-select>
          </el-form-item>
              <el-form-item label="昵称">
                <el-input type="text" v-model="user.nickname" style="width:300px" ></el-input>
              </el-form-item>
              <el-form-item label="性别">
            <el-radio-group v-model="user.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="0">女</el-radio>
              
            </el-radio-group>
          </el-form-item>
              <el-form-item label="密码" v-if="!isEdit">
                <el-input type="password" v-model="user.password" style="width:700px" ></el-input>
              </el-form-item>
            <el-form-item  label="邮箱">
                <el-input type="text" v-model="user.email" style="width:700px"></el-input>
              </el-form-item>
            <el-form-item  label="手机">
                <el-input type="text" v-model="user.phoneNumber" style="width:700px"></el-input>
              </el-form-item>
            <el-form-item  label="生日">
              <el-date-picker value-format="yyyy年MM月dd日" type="date" placeholder="选择日期" v-model="user.birth" style="width: 100%;"></el-date-picker>
              </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSure">确 定</el-button>
          </span>
          </el-dialog>
          <!-- 分配 -->
          <el-dialog
          title="分配角色"
          :visible="showRole"
          width="50%"
          center
          :before-close="closeAssign">
          <transfer :roleMenu=roleMenu></transfer>
          <span slot="footer" class="dialog-footer">
            <el-button @click="closeAssign">取 消</el-button>
            <el-button type="primary" @click="sureAssign">确 定</el-button>
          </span>
          </el-dialog>
    </el-card>
  </div>
</template>

<script>
import transfer from "../../components/transfer.vue"
    let defaultQuery = {
      
      departmentId:"",
      username: "", //用户名
      email: "", //邮箱
      sex: "", //性别
      nickname: "", //昵称
      pageSize:6,
      pageNum:1,
    };
    let user={
      username:"",
      nickname:"",
      departmentId:"",
      sex:null,
      password:"",
      email:"",
      phoneNumber:"",
      birth:"",
    }
export default {
  data(){
    return {
      listQuery: Object.assign({}, defaultQuery),
      user: Object.assign({}, user),
      departmentOptions: [{ id: 1, label: "物资管理部" }],
      userList: [],
      total:10,
      showRole:false,
      isShow:false,
      isEdit:false,
      departmentList:[
        {label:"物资管理部",id:1},
        {label:"采购部",id:12},
        {label:"信息技术部",id:14},
        {label:"行政部",id:15},
      ],
      roleMenu:[]
      
    };
  },
  components:{
    transfer
  },
 created(){
   this.getUserList()
   this.getDepartList()
 },
 filters:{
   sex(value){
     if(value===0){
       return "女"
     }else if(value===1){
       return "男"
     }
   }
 },
  methods:{
  
    //是否禁用按钮的切换
  async handleShowchange(index,row) {
    let id = row.id
    let status = row.status
         let res =  await this.$http.put("/user/updateStatus/"+id+"/"+status);
         if(res.status===200){
           this.getUserList()
           
         }
         console.log(res)
  },
  //请求表格列表
  async getUserList(){
     let res =  await this.$http.get("/user/findUserList",{params:this.listQuery});
     if(res.status===200){
       this.userList = res.data.data.rows
       this.total = res.data.data.total
       this.$message.success("用户管理列表请求成功")
     }else{
       this.$message.warning("用户管理列表请求失败")
     }
     console.log(res)
  },
  async getDepartList(){
      let res =  await this.$http.get("/department/findDepartmentList?pageSize="+this.listQuery.pageSize);
      console.log("res=>",res)
      if(res.status===200){
        this.departmentOptions=res.data.data.rows
      }else{
        this.$message.warning("获取部门管理列表失败")
      }
  },
       //页码变化
   handlePageChange(val){
       this.listQuery.pageNum = val
       this.getUserList()
     },
     //点击一页显示多少条
     handleSizeChange(val){
      this.listQuery.pageSize = val
      this.listQuery.pageNum = 1
      this.getUserList()
     },
     //查询
     handleSearch(){
       this.getUserList()
     },
     //重置
     handleReset(){
       this.listQuery=Object.assign({}, defaultQuery)
     },
     //小叉子和取消
     handleClose(){
       this.isShow  = false
       this.isEdit = false
       this.user = Object.assign({}, user)
     },
     //确定编辑和添加
     async handleSure(){
       if(this.isEdit){
           let res =  await this.$http.put("/user/update/"+this.user.id,this.user);
           if(res.data.code==200){
             this.isEdit = false
               this.isShow = false
              this.$message.success("用户编辑成功")
              this.getUserList()
              this.user = Object.assign({}, user)
           }
       }else{
          let res =  await this.$http.post("/user/add",this.user);
          if(res.data.code===200){
          this.isShow = false
         this.$message.success("用户添加成功")
         this.getUserList()
         this.user = Object.assign({}, user)
       }else{
         this.$message.warning(res.data.msg)
       }
       }
      
     },
     //添加
     handleAdd(){
       this.isShow=true
     },
     //编辑
     async handleEdit(row){
        let res =  await this.$http.get("/user/edit/"+row.id);
        console.log("9999999999999999999",res)
        if(res.data.code===200){
        this.isShow = true
        this.isEdit = true
        this.user = res.data.data       
        }
     },
     //删除
      handleDelete(id){
           this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res =  await this.$http.delete(`/user/delete/${id}`);
         if(res.status===200){
            this.$message.success("删除数据成功")
            this.getUserList()
         }else{
           this.$message.warning("删除数据失败")
         }   
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });  
     },
     //点击分配角色
     async handleAssign(index,row){
       this.showRole =true
       let res =  await this.$http.get("/user/"+row.id+"/roles");
       console.log(res)
       if(res.data.code===200){
          this.roleMenu5 = res.data.data.roles
       }
     },
     //确定分配角色
     sureAssign(){

     },
     //分配角色的叉子和取消
     closeAssign(){
       this.showRole=false
     }
  }
};
</script>

<style lang="less" scoped>
</style>

